<template>
	<view class="cart-content height100">
		<view class="cart-header">
			<view class="header-l">
				购物车<text class="colorInfo text-p-i">{{`(${productCount})`}}</text>
			</view>
			<view class="header-c">
				<uni-search-bar placeholder="请输入内容搜索"  cancelButton="none"   @confirm="search"  v-model="searchValue"
					 @clear="clear"></uni-search-bar>
			</view>
			<view class="header-r">
				<text @click="showDelsClick">{{showDels ? '退出管理' : '管理'}}</text>
			</view>
		</view>
		<scroll-view
			:refresher-enabled="true"
			:refresher-triggered="isRefreshing"
			@refresherrefresh="handleRefresh"
			refresher-default-style="none"
			class="cart-body loadScrollView" scroll-y @scrolltolower="scrolltolower">
			<view slot="refresher" style="width: 100%;text-align: center;">
			<top-load-more :loadMoreStatus="loadMoreStatus"></top-load-more>
			  </view>
			<view class="order-item" v-for="(cart,index) in list" :key="index">
				<view class="item-provider marginBottom10 ">
					<up-checkbox
					class="cart-check-btn"
							activeColor="#dd524d"
							inactiveColor="#909399"
							shape="circle"
					        usedAlone
							@change="((e)=>cartChange(e,cart,index))"
					        v-model:checked="cart.checked"
					    >
					</up-checkbox>
					<view class="p-left icon-text" style="margin-left: 14rpx;">
						<image style="width: 60rpx;height: 60rpx;" :src="cart.companyAvatar"></image>
						<text>{{cart.companyName}}</text>
						<uni-icons style="margin-left: 8rpx;"  type="right" size="16"></uni-icons>
					</view>
				</view>
				<uni-swipe-action>
					<view class="marginBottom10" v-for="(prod,i) in cart.orders" :key="i">
						<uni-swipe-action-item>
							<view class="cart-prod">
								<up-checkbox
								class="cart-check-btn"
										activeColor="#dd524d"
										inactiveColor="#909399"
										shape="circle"
										@change="((e)=>prodChange(e,cart,prod,index,i))"
										usedAlone
										v-model:checked="prod.checked"
									>
								</up-checkbox>
								<view class="item-product" style="margin-left: 14rpx;">
									<view class="prod-img">
										<image style="width: 120rpx;height: 120rpx;border-radius: 20rpx;" :src="prod.specificationImg"></image>
									</view>
									<view class="prod-center">
										<view class="prod-name">
											<up-text size="12" :lines="1" :text="prod.productName" ></up-text>
										</view>
										<view class="spec-name">
											<up-text size="12" :lines="1" :text="prod.specificationName"  type="info" ></up-text>
										</view>
										<view class="spec-p" style="display: flex;justify-content: space-between;">
											<text class="colorError" style="font-weight: 500">
												{{'￥'+prod.price}}
											</text>
											<uni-number-box v-if="!showDels" class="btnInlineFlex"  v-model="prod.quantity" :min="1" :max="prod.store"></uni-number-box>
											<uni-icons v-if="showDels" type="trash" color="#dd524d"  size="24"></uni-icons>
										</view>
									</view>
								</view>
							</view>
							<template v-slot:right>
								<view >
									<text @click="collect(prod,i)" class="swipe-btn bgWarning">收藏</text>
									<text @click="delProd(prod,i)" class="swipe-btn bgError">删除</text>
								</view>
							</template>
						</uni-swipe-action-item>
					</view>
				</uni-swipe-action>
			</view>
			
		</scroll-view>
		<view class="cart-btn">
			
		</view>
		<view class="cart-btn-fiexd">
			<up-checkbox
			        label="全选"
			        name="agree"
					activeColor="#dd524d"
					inactiveColor="#909399"
					shape="circle"
			        usedAlone
					@change="allChange"
			        v-model:checked="allChecked"
			    >
			</up-checkbox>
			<view v-if="!showDels" class="btn-fiexd">
				<text v-if="selectCount" class="colorInfo text-p-i">已选{{selectCount}}，</text> 
				<text class="text-p-i">合计:</text>
				<text class="colorError" style="font-weight: 500;margin-right: 14rpx;">
					<text class="text-p-i">￥</text>
					<text class="fontSize30rpx">{{orderTotal}}</text>
				</text>
				<button  class="btnInline btnDefaultSize" size="mini" type="warn" >结算</button>
			</view>
			<view v-if="showDels" class="btn-fiexd">
				<button class="btnInline btnDefaultSize" size="mini" >收藏</button>
				<button  class="btnInline btnDefaultSize marginLeft10" size="mini" type="warn" >删除</button>
			</view>
		</view>
	</view>
</template>

<script setup>
import { computed, ref } from 'vue';
import { useStore } from 'vuex';
import {onLoad} from "@dcloudio/uni-app";
import TopLoadMore from "@/components/TopLoadMore.vue";
const productCount = ref(1);
const showDels = ref(false);
const allChecked = ref(false);
const searchValue = ref('');
const loadStatus = ref('loading');//more|loading|nomore
const loadMoreStatus = ref('more');//more|loading|nomore
const isLoad = ref(false);
const isRefreshing = ref(false);
const list = ref([{
		id:1,
		companyName:'卡孚斯机械店',
		companyAvatar:'https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEIhGbh22n49Y7cZ5RGdyialW3uR0Wny4vKa5VIMpYkcR9QuTJr7FR96wktUIhthN8u7gGNXtU8AbGCYZJHRcTHAkQ5HH2ULh5KoaHICVlBwwtg/132',
		orderStatus:0,
		orderAmount:33.9,
		checked:false,
		orders:[
			{
				productName:'螺母木木木木螺母木木木木螺母木木木木螺母木木木木',
				specificationName:'铂金螺母100g*10000螺母木木木木螺母木木木木螺母木木木木螺母木木木木',
				quantity:1,
				price:3.3,
				store:999,
				specificationImg:'http://engineer-bucket-sz-test.oss-cn-shenzhen.aliyuncs.com/productImg/202503/fe6a90e20dee436190537736e2349e00.jpg?Expires=2613815931&OSSAccessKeyId=LTAI5t5grvMi2FVQcMoYc3rz&Signature=rtml%2BDaMgMzi0v81F4hL8ifN6dk%3D',
				isRefund:false,
				checked:false,
				show:'none'
			},
			{
				productName:'螺母2',
				specificationName:'黄金螺母100g*10000',
				quantity:1,
				specificationImg:'http://engineer-bucket-sz-test.oss-cn-shenzhen.aliyuncs.com/productImg/202503/fe6a90e20dee436190537736e2349e00.jpg?Expires=2613815931&OSSAccessKeyId=LTAI5t5grvMi2FVQcMoYc3rz&Signature=rtml%2BDaMgMzi0v81F4hL8ifN6dk%3D',
				price:4.3,
				isRefund:true,
				checked:false,
				store:999,
				refundStatus:0,
				show:'none'
			}
		]
	},
	{
		id:2,
		companyName:'卡孚斯机械店',
		companyAvatar:'https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEIhGbh22n49Y7cZ5RGdyialW3uR0Wny4vKa5VIMpYkcR9QuTJr7FR96wktUIhthN8u7gGNXtU8AbGCYZJHRcTHAkQ5HH2ULh5KoaHICVlBwwtg/132',
		orderStatus:1,
		orderAmount:33.9,
		checked:false,
		orders:[
			{
				productName:'螺母',
				specificationName:'铂金螺母100g*10000',
				quantity:1,
				specificationImg:'http://engineer-bucket-sz-test.oss-cn-shenzhen.aliyuncs.com/productImg/202503/fe6a90e20dee436190537736e2349e00.jpg?Expires=2613815931&OSSAccessKeyId=LTAI5t5grvMi2FVQcMoYc3rz&Signature=rtml%2BDaMgMzi0v81F4hL8ifN6dk%3D',
				price:3.3,
				store:999,
				isRefund:false,
				checked:false,
				show:'none'
			},
			{
				productName:'螺母2',
				specificationName:'黄金螺母100g*10000',
				specificationImg:'http://engineer-bucket-sz-test.oss-cn-shenzhen.aliyuncs.com/productImg/202503/fe6a90e20dee436190537736e2349e00.jpg?Expires=2613815931&OSSAccessKeyId=LTAI5t5grvMi2FVQcMoYc3rz&Signature=rtml%2BDaMgMzi0v81F4hL8ifN6dk%3D',
				quantity:1,
				price:4.3,
				isRefund:true,
				store:999,
				refundStatus:0,
				checked:false,
				show:'none'
			}
		]
	}
])

const selectCount = computed(()=> {
	let sum = 0;
	for (var i = 0; i < list.value.length; i++) {
		let cart = list.value[i];
		for (let prod of cart.orders) {
			if(prod.checked) sum++;
		}
	}
	return sum;
})
const orderTotal = computed(()=> {
	let sum = 0;
	for (var i = 0; i < list.value.length; i++) {
		let cart = list.value[i];
		for (let prod of cart.orders) {
			if(prod.checked) sum+= prod.quantity * prod.price;
		}
	}
	return sum.toFixed(2);
})
function cartChange(e,cart,index){
	console.info("cc",e,cart.checked)
	cart.checked = e;
	cart.orders.forEach(prod=>{
		prod.checked = e;
	})
}
function prodChange(e,cart,prod,index,i){
	prod.checked = e;
	console.info("pp",e,cart.checked,prod.checked);
	let filter =  cart.orders.filter(p => p.checked == true);
	console.info('filter',filter)
	if(filter.length == 0){
		cart.checked = false;
	}else if(filter.length == cart.orders.length){
		cart.checked = true;
	}
	
}

function collect(prod){
	console.info("收藏")
}

function delProd(prod){
	console.info("删除")
}
//全选、全不选
function allChange(e){
	for (let cart of list.value) {
		cart.checked = e;
		for (let prod of cart.orders) {
			prod.checked = e;
		}
	}
}

onLoad(()=>{
  console.info('onLoad','页面加载')
})

function handleRefresh(){
  isRefreshing.value = true;
  loadMoreStatus.value = 'loading';
  console.info('refresh','触发刷新')
  setTimeout(()=>{
    loadMoreStatus.value = 'nomore';
  },1400)
  setTimeout(()=>{
    isRefreshing.value = false;
    setTimeout(()=>{
      loadMoreStatus.value = 'more';
    },1000)
  },2000)
}

function init(){
  // captchaImage({}).then(res=>{
  // 	// console.info('res',res);
  // })
  // uni.showToast({
  // 	icon:'none',
  // 	title:'提示框'
  // })
}
function scrolltolower(){
  if(isLoad.value) return;
  isLoad.value = true;
  console.info('scrolltolower','到底部了')
  let lastId =  list.value[list.value.length - 1].id;
  let newArr = [];
  for (var i = 0; i < 10; i++) {
    lastId++;
    newArr.push({
      id:lastId,
      price: 8243,
      title: '俱往矣，数风流人物，还看今朝',
      shop: '李白杜甫白居易旗舰店',
      image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg',
    })
  }
  setTimeout(()=>{
    list.value = list.value.concat(newArr);
    isLoad.value = false;
  },1500)

}
function search(){
	console.info('search',searchValue.value)
}
function clear(){
	console.info('clear',searchValue.value)
}
function showDelsClick(){
	showDels.value = !showDels.value;
}
</script>

<style lang="scss" scoped>
	.cart-content{
		position: relative;
		.cart-header{
			background-color: white;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0rpx 20rpx;
			.header-l{
				font-size: 32rpx;
			}
			.header-c{
				flex: 1;
			}
		}
		.cart-body{
			flex: 1;
			margin: 0rpx 10rpx;
		}
		.cart-btn{
			height: 100rpx;
		}
		.cart-btn-fiexd{
			height: 100rpx;
			background-color: white;
			position: absolute;
			bottom: 0;
			left: 0;
			width: calc(100% - 40rpx);
			padding: 0rpx 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.btn-fiexd{
				flex: 1;
				// display: flex;
				// justify-content: end;
				align-items: center;
				text-align: right;
			}
		}
	}
	.order-item{
		background-color: white;
		padding: 20rpx;
		margin-bottom: 20rpx;
		.item-provider{
			display: flex;
			align-items: center;
			font-size: 32rpx;
			
		}
		.cart-prod{
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 24rpx;
		}
		.item-product{
			line-height: 40rpx;
			font-size: 24rpx;
			display: flex;
			flex: 1;
			justify-content: space-between;
			// align-items: center;
			.prod-img{
				width: 120rpx;
				height: 120rpx;
				border: 1px dashed gainsboro;
				border-radius: 20rpx;
			}
			.prod-center{
				padding: 10rpx 16rpx 0rpx 16rpx;
				flex: 1;
			}
			.prod-right{
				padding-top: 8rpx;
			}
		}
		.order-btn{
			// display: flex;
			// justify-content: end;
		}
	}
	
	.text-price{
		// color: red;
		font-size: 30rpx;
		.text-p-i{
			font-size: 24rpx;
		}
	}
	.cart-prod{
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 24rpx;
	}
	
	.swipe-btn{
		display: inline-flex;
		padding: 0rpx 20rpx;
		height: 100%;
		justify-content: center;
		align-items: center;
		color: white;
		font-size: 13px;
	}
</style>